<template>
  <div class="home-page">
    <div class="main-center">
      <h1 style="margin-bottom: 50px;margin-top: 50px">网站地图</h1>
      <div class="map-box">
        <div>
          <span @click="herfto('index')" class="shouyespan">首页 Homepage</span>
          <p style="margin-top: 40px">私立中学School & Colleges</p>
          <ul>
            <li>
              <span @click="herfto('dvb')">牛津德欧中学 DVB</span>
            </li>
            <li>
              <span @click="herfto('oic')">牛津国际高中 OIC</span>
            </li>
            <li>
              <span @click="herfto('oxsfc')">牛津学院 OxSFC</span>
            </li>
          </ul>
          <p style="margin-top: 40px">关于我们 About Us </p>
          <ul>
            <li>
              <span @click="herfto('corevalue')">核心价值观 Our Core Values </span>
            </li>
            <li>
              <span @click="herfto('policy')">隐私条款 Privacy Policy </span>
            </li>
          </ul>
        </div>
        <div>
          <p>合作大学 University Partnerships </p>
          <ul>
            <li>
              <span @click="herfto('bangor')">班戈大学 Bangor University </span>
            </li>
            <li>
              <span @click="herfto('dundee')">邓迪大学 The University of Dundee </span>
            </li>
            <li>
              <span @click="herfto('montfort')">德蒙福特大学 De Montfort University </span>
            </li>
            <li>
              <span @click="herfto('greenwich')">格林威治大学 University Of Greenwich </span>
            </li>
            <li>
              <span @click="herfto('jacobs')">雅各布大学 Jacobs University </span>
            </li>
            <li>
              <span @click="herfto('application')">申请 University Partnerships Application</span>
            </li>
          </ul>
          <p style="margin-top: 40px">代理服务 For Agents </p>
          <ul>
            <li>
              <span @click="herfto('agents')">合作介绍 Partner With Us </span>
            </li>
            <li>
              <span @click="herfto('download')">资料下载 Brochure DownloadsT</span>
            </li>
          </ul>
        </div>
      </div>
      <!--<div class="map">
        <div class="map-main1" @click="herfto('index')">
          <img src="../../assets/blue.png" alt="" class="pic">
          <span>OIEG官网首页</span>
          <span>Home</span>
        </div>

        <div class="map-main1">
          <img src="../../assets/blue.png" alt="" class="pic">
          <span>私立中学</span>
          <span>School & Colleges</span>
        </div>
        <div class="map-main">
          <div @click="herfto('dvb')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>德欧中学</span>
            <span>DVB</span>
          </div>
          <div @click="herfto('oic')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>牛津国际高中</span>
            <span>OIC</span>
          </div>
          <div @click="herfto('oxsfc')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>牛津学院</span>
            <span>OxSFC</span>
          </div>
        </div>

        <div class="map-main1">
          <img src="../../assets/blue.png" alt="" class="pic">
          <span>合作大学 </span>
          <span>University Partnerships</span>
        </div>
        <div class="map-main">
          <div @click="herfto('bangor')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>班戈大学</span>
            <span>Bangor University</span>
          </div>
          <div @click="herfto('dundee')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>邓迪大学 </span>
            <span>The University of Dundee</span>
          </div>
          <div @click="herfto('montfort')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>德蒙福特大学 </span>
            <span>De Montfort University</span>
          </div>
          <div @click="herfto('greenwich')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>格林威治大学  </span>
            <span>University Of Greenwich</span>
          </div>
          <div @click="herfto('jacobs')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>雅各布大学  </span>
            <span>Jacobs University</span>
          </div>
          <div @click="herfto('application')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>申请  </span>
            <span>University Partnerships Application</span>
          </div>
        </div>

        <div class="map-main1">
          <img src="../../assets/blue.png" alt="" class="pic">
          <span>关于我们 </span>
          <span>About Us</span>
        </div>
        <div class="map-main">
          <div @click="herfto('corevalue')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>核心价值观 </span>
            <span>Our Core Values</span>
          </div>
          <div @click="herfto('policy')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>隐私条款</span>
            <span>Privacy Policy</span>
          </div>
        </div>

        <div class="map-main1">
          <img src="../../assets/blue.png" alt="" class="pic">
          <span>代理服务  </span>
          <span>For Agents</span>
        </div>
        <div class="map-main">
          <div @click="herfto('agents')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>合作介绍  </span>
            <span>Partner With Us</span>
          </div>
          <div @click="herfto('download')">
            <img src="../../assets/green.png" alt="" class="pic">
            <span>资料下载 </span>
            <span>Brochure Downloads</span>
          </div>
        </div>-->

<!--      </div>-->
    </div>

  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return {

      }
    },
    methods:{
      herfto(name) {
        this.$router.push(`/${name}`)
      },
    }
  }
</script>

<style scoped lang="scss">
.main-center{
  padding-top: 150px;
  padding-bottom: 200px;
  /*max-width: 900px;*/
  /*margin: 0 auto;*/
}
.map-box{
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
  div:nth-of-type(1){
    margin-right: 150px;
  }
  div{
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
  }
  p{
    font-size: 19px;
    line-height: 0;
    margin-bottom: 30px;
  }
  span{
    transition: all .3s;
    cursor: pointer;
    font-size: 19px;
  }
  li{
    margin-bottom: 15px;
    span{
      padding-left: 30px;
      position: relative;
      font-size: 17px;
      /*display: block;*/
    }
    span:before{
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #303030;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  span:hover{
    color: #409eff;
  }
  .shouyespan{
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
  }
}
.map{
  display: flex;
  flex-direction: column;

  .map-main{
cursor: pointer;
    display: flex;
    flex-direction: column;
    div:nth-of-type(1){
      display: flex;
      flex-direction: row;
    }
    div{
      span{
        transition: all .3s;
      }
      cursor: pointer;
      display: flex;
      flex-direction: row;
      padding-left: 38px;
      align-items: center;
      margin-bottom: 15px;
    }
    div:hover{
      span{
        color: #409eff;
      }
    }
    .pic{
      display: block;
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
  }
}
  .map-main1{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    span{
      transition: all 0.3s;
    }
    .pic{
      display: block;
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
    margin-bottom: 20px;
  }
.map-main1:hover{
  span{
    color: #409eff;
  }
}
</style>
